<template>
  <div class="class-tag">
    <div v-for="(item, index) in tagListData" :key="item.id" class="m-tagbox g-f">
      <div
        class="u-tag u-tag-2"
        v-for="(citem, cindex) in item.list"
        :class="{ 'u-tag-1': cindex == 0, 'u-tag-3': item.choiceId == citem.id }"
        :key="cindex"
        @touchmove.stop
        @click="tagChoice(index, cindex)"
      >
        {{ citem.content }}
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs,  onMounted } from 'vue'
export default {
  props:["tagList"],
  setup(props,{emit}) {
    let data = reactive({
      tagListData:[],
      // tagListData: [
      //   {
      //     id: 1,
      //     choiceId: 1,
      //     list: [
      //       { content: '综合排序', id: 1 },
      //       { content: '最多播放', id: 2 },
      //       { content: '最近更新', id: 3 },
      //       { content: '即将上映', id: 4 },
      //       { content: '最多好评', id: 5 },
      //       { content: '最多好评', id: 6 }
      //     ]
      //   },
      //   {
      //     id: 2,
      //     choiceId: 7,
      //     list: [
      //       { content: '全部地区', id: 7 },
      //       { content: '中国大陆', id: 8 },
      //       { content: '中国台湾', id: 9 },
      //       { content: '俄罗斯', id: 10 },
      //       { content: '美国', id: 11 }
      //     ]
      //   },
      //   {
      //     id: 3,
      //     choiceId: 12,
      //     list: [
      //       { content: '全部地区', id: 12 },
      //       { content: '中国大陆', id: 13 },
      //       { content: '中国台湾', id: 14 },
      //       { content: '俄罗斯', id: 15 },
      //       { content: '美国', id: 16 }
      //     ]
      //   }
      // ]
    })
    function tagChoice(index, cindex) {
      data.tagListData[index].choiceId = data.tagListData[index].list[cindex].id
      let choiceList=data.tagListData.map(i=>{
        return i.choiceId
      })
      emit("choiceEvent",choiceList)
    }
    onMounted(()=>{
      console.log(props.tagList)
      data.tagListData=props.tagList.map(item=>{
        //choiceId记录选择类型的id
        item.choiceId=item.list[0].id 
        return item
      })
    })
    return { ...toRefs(data), tagChoice }
  }
}
</script>

<style scoped lang="scss">
.g-f {
  display: flex;
}
.class-tag {
  padding: 10px 10px 0px 10px;
  overflow: hidden;
  // box-sizing: border-box;
  .m-tagbox {
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    width: 100%;
    .u-tag {
      height: 26px;
      line-height: 26px;
      flex-shrink: 0;
      margin-right: 10px;
      border: 1px solid #d7d7d7;
      font-size: 12px;
      text-align: center;
    }
    .u-tag-1 {
      border-radius: 3px;
      width: 80px;
    }
    .u-tag-2 {
      padding: 0 10px;
    }
    .u-tag-3 {
      background-color: #efa464;
      color: #ffffff;
    }
  }
  .m-tagbox::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .custom-van_row {
    overflow-x: auto;
    height: 30px;
    .custom-van_col {
      flex-shrink: 0;
    }
  }
}
</style>
